<template>
    <div class="stars d-flex align-center">
        <Star :num="i" v-for="(i, id) in list" :key="id" />
        <div class="nums text-h6 ml-2">{{ props.num }}</div>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import Star from "./item.vue";

const props = defineProps({
    num: Number
});

const list = computed(() => {
    var num = props.num!;
    let arr = [];
    for (let i = 0; i < 5; i++) {
        if (num >= 2) {
            arr.push(1);
        } else {
            if (num > 0) {
                arr.push(num / 2);
            } else {
                arr.push(0);
            }
        }
        num -= 2;
    }
    console.log(arr);
    return arr;
});
</script>

<style lang="less" scoped>
.star {
    width: 20px;
    height: 20px;
    position: relative;
}

.color {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 1;
}

.img {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    display: block;
    padding: 0;
    margin: 0;
}
.nums {
    color: #fe9517;
}
</style>
